<template>
  <div v-title data-title="共同爱好者网">
    <el-container>

      <el-main class="me-articles">
        <el-tabs type="border-card" @tab-click="view">
          <el-tab-pane label="全部">
            <article-scroll-page></article-scroll-page>
          </el-tab-pane>
          <el-tab-pane v-for="(a) in tags" :key="a.id" :label="a.tagName" :data-id="a.id">
            <article-scroll-page v-bind="article"></article-scroll-page>
          </el-tab-pane>
          <!-- <el-tab-pane label="兴趣">兴趣</el-tab-pane>
          <el-tab-pane label="社区">社区</el-tab-pane> -->
        </el-tabs>



      </el-main>

      <el-aside>

        <card-me class="me-area"></card-me>
        <card-tag :tags="hotTags"></card-tag>

        <!-- <card-article cardHeader="最热文章" :articles="hotArticles"></card-article> -->

        <card-archive cardHeader="文章归档" :archives="archives"></card-archive>

        <!-- <card-article cardHeader="最新文章" :articles="newArticles"></card-article> -->

      </el-aside>

    </el-container>
  </div>
</template>

<script>
  import CardMe from '@/components/card/CardMe'
  import CardArticle from '@/components/card/CardArticle'
  import CardArchive from '@/components/card/CardArchive'
  import CardTag from '@/components/card/CardTag'
  import ArticleScrollPage from '@/views/common/ArticleScrollPage'

  import {getArticles, getHotArtices, getNewArtices} from '@/api/article'
  import {getHotTags} from '@/api/tag'
  import {listArchives} from '@/api/article'

  export default {
    name: 'Index',
    created() {
      // this.getHotArtices()
      // this.getNewArtices()
      this.getHotTags()
      this.listArchives(this.$store.state.token)
      this.findAllMyTag(this.$store.state.token)
    },
    data() {
      return {
        articles: [],
        article: {
          query: {
            tagId: '',
            categoryId: ''
          }
        },
        hotTags: [],
        hotArticles: [],
        newArticles: [],
        archives: [],
        tags: []
      }
    },
    methods: {
      getHotArtices() {
        let that = this
        getHotArtices().then(data => {
          that.hotArticles = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '最热文章加载失败!', showClose: true})
          }
        })

      },
      getNewArtices() {
        let that = this
        getNewArtices().then(data => {
          that.newArticles = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '最新文章加载失败!', showClose: true})
          }

        })

      },
      getHotTags() {
        let that = this
        getHotTags().then(data => {
          that.hotTags = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '最热标签加载失败!', showClose: true})
          }

        })
      },
      listArchives(token) {
        // listArchives().then((data => {
        //   this.archives = data.data
        // })).catch(error => {
        //   if (error !== 'error') {
        //     that.$message({type: 'error', message: '文章归档加载失败!', showClose: true})
        //   }
        // })
        const that = this
        that.$http({
          headers: {'Authorization': token},
          url: '/articles/listArchives',
          method:'post',
        })
        .then(function(res) {
          console.log(res.data)
          that.$data.archives = res.data.data
        })
        .catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '文章归档加载失败!', showClose: true})
          }
        })
      },
      findAllMyTag(token) {
        const that = this
        that.$http({
          headers: {'Authorization': token},
          url: '/tags/findPersonalTag',
          method:'get',
        })
        .then(function(res) {
          that.$data.tags = res.data.data
        })
      },
      // getArticlesByTag(id) {
      //   let that = this
      //   getArticlesByTag(id).then(data => {
      //     that.article = data.data
      //   }).catch(error => {
      //     if (error !== 'error') {
      //       that.$message({type: 'error', message: '文章加载失败', showClose: true})
      //     }
      //   })
      // },
      view(tab,event) {
        // this.getArticlesByTag(id)
        console.log(tab)
        console.log(tab.$attrs['data-id'])
        this.$data.article.query.tagId = tab.$attrs['data-id'] + ''
      }

    },
    components: {
      'card-me': CardMe,
      'card-article': CardArticle,
      'card-tag': CardTag,
      ArticleScrollPage,
      CardArchive
    }
  }
</script>

<style scoped>

  .el-container {
    width: 960px;
  }

  .el-aside {
    margin-left: 20px;
    width: 260px;
  }

  .el-main {
    padding: 0px;
    line-height: 16px;
  }

  .el-card {
    border-radius: 0;
  }

  .el-card:not(:first-child) {
    margin-top: 20px;
  }
</style>
